<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div>
        <div id="app">
            {{msg}}
            <h1 id="h1">{{msg2}}</h1>
            手机价格<h2 id="h2">{{num}}</h2>
            <button @click='add'>点击+</button>
         
        </div>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        // 生命周期概念 一个应用或者页面 从创建到消亡的过程中 在某一时刻会自动调用的回调函数就叫做生命周期 

        // var vm = new Vue过程经历四个步骤
        //1  vm = {}  2 原型链节约内存的绑定  vm {}.__proto__ = Vue.prototype 
        // 3正常赋值 1   beforeCreate()  第四步return 回去 2  created()  
        // VUE的算法会进行比对操作 99% DOM加载好之前 就差最后百分之1    beforeMount() 
        // 比对data数据和页面的关系 进行 变量的替换 替换成功后马上再源码中会调用mounted()渲染之后生命周期


        var vm = new Vue({
            // 监管的容器 
            el: '#app',
            // 数据定义
            data: {
                msg: 'helloworld',
                msg2: '你好世界',
                num:980,
                
            },
            methods: {
                aler(e) {
                    console.log(111)
                },
                add() {
                    this.num = this.num +1
                    console.log(this.num)
                }
            },
            // vue lifeCycle 生命周期 
            // 第一个生命周期 创建之前 
            // 调用时机 会在桥梁函数 未完善return数据之前调用 
            // beforeCreate() 使用方式 基本上工作不会使用 比较废的 一个生命周期 
            beforeCreate() {
                console.log('beforeCreate')
                console.log(this.msg)      
                //  this.aler()
            },
            // 第二个生命周期 创建之后 
            // 调用时机 会在桥梁函数 return之后调用 此时拿到了数据和方法 很有用
            // Created() 使用方式  最早的ajax获取服务器数据的请求 
            // 缺点 数据和方法能使用 但是页面还未来得及完全渲染成功
            // 注意在created 里面不要进行DOM操作 因为DOM节点 未完全好 
            created() {
                console.log('created')
                console.log(this.msg)      
                this.aler('created')
                var h = document.getElementById('h1')
                console.log(h.innerHTML)
            },
             // 第三个生命周期 DOM渲染之前 临门一脚
            // 调用时机 会在DOM即将渲染上去的瞬间之前调用
            // beforeMount() 使用方式   和created差不多  
            // 缺点 数据和方法能使用 但是页面还未来得及完全渲染成功
            // 注意在created 里面不要进行DOM操作 因为DOM节点 未完全好 
            beforeMount() {
                console.log('beforeMount')
                console.log(this.msg)      
                this.aler('beforeMount')
                var h = document.getElementById('h1')
                console.log(h.innerHTML)
            },
              // 第四个生命周期  渲染之后 
            // 调用时机 会在DOM 渲染上去的瞬间之前调用
            // mounted() 使用方式  拥有created一切功能 但是时间稍后  如果想使用DOM完整操作 最好的生命周期
            mounted() {
                console.log('mounted')
                console.log(this.msg)      
                this.aler('mounted')
                var h = document.getElementById('h1')
                console.log(h.innerHTML)
                // 定时器 
                setInterval(() => {
                   console.log('定时器执行了')
                }, 1000);
            },
            // 数据更新之前
            // 调用时机 页面数据发生改变后执行 
            // 注意事项 执行时机 必须 改变的数据和视图有联系 才会执行 !!!!!重点!!!
            beforeUpdate() {
                console.log('beforeUpdate')
                var h = document.getElementById('h2')
                console.log(h.innerHTML)
                if(this.num >1000) {
                    this.num =1000
                }
            },
            // 数据更新之后 
            updated() {
                console.log('updated')
                var h = document.getElementById('h2')
                console.log(h.innerHTML)
            },
            // 销毁之前 
            // 调用时机 页面跳转的时候自动调用 
            // 使用方式以及意义  
            //  程序员如何使用   可以即将离开之前  清除定时器 节约之前页面性能 因为不清除定时器 它会常驻内存
            // 还可以清除dom的监听事件 
            beforeDestroy() {
                console.log('beforeDestroy')
            },
            // 销毁之后 
            destroyed() {
                console.log('destroyed')
            }
        })

        console.log(vm)
    </script>
</body>

</html>